import React, { useReducer } from 'react';
// import logo from './logo.svg';
import './App.css';
import { AppContainer } from './styles';
import { Column } from './Column';

import { AddNewItem } from './AddNewItem';
import { useAppState } from './AppStateContext';




const App = () => {

    /** 测试Reducer */
    // const counterReducer = (state: State, action: Action) => {
    //     switch (action.type) {
    //         case 'increment':
    //             return { count: state.count + 1 }
    //         case 'decrement':
    //             return { count: state.count - 1 }
    //         default:
    //             throw new Error()
    //     }
    // }

    // const [state2, dispatch2] = useReducer(counterReducer, { count: 0 })

    const { state, dispatch } = useAppState() //通过AppStateContextProps获取参数
    return (
        // <div className="App">
        //   <header className="App-header">
        //     <img src={logo} className="App-logo" alt="logo" />
        //     <p>
        //       Edit <code>src/App.tsx</code> and save to reload.
        //     </p>
        //     <a
        //       className="App-link"
        //       href="https://reactjs.org"
        //       target="_blank"
        //       rel="noopener noreferrer"
        //     >
        //       Learn React
        //     </a>
        //   </header>
        // </div>
        <AppContainer>
            {/* <Column text='To Do'>
          <Card text="去买一杯咖啡" />
        </Column>
        <Column text='修改Bug'>
          <Card text='需要修改React中出现的问题'/>
        </Column>
        <Column text='已经编写完成'>
          <Card text='工作计划已将编写完成'/>
        </Column> */}

            {state.lists.map((list, i) => (
                <Column id={list.id} text={list.text} key={list.id} index={i} />
            ))}

            <AddNewItem toggleButtonText="新增一列" onAdd={(text) => dispatch({ type: "ADD_LIST", payload: text })} />

            {/* <p>Count: {state2.count}</p>
            <button onClick={() => dispatch2({ type: "decrement" })}>-</button>
            <button onClick={() => dispatch2({ type: "increment" })}>+</button> */}
        </AppContainer>

    );
}

export default App;

type State = { count: number }
type Action = { type: "increment" } | { type: "decrement" }

